<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>用户设置</title>

  {include file='common/_require'/}
</head>

<body>

  {include file='common/_header'/}

  <div class="layui-container fly-marginTop fly-user-main">
    {include file='common/_user'/}
    <script>$('.user-nav-item-set').addClass('layui-this')</script>


    <div class="fly-panel fly-panel-user" pad20>
      <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title">
          <li class="layui-this" lay-id="info">我的资料</li>
          <li lay-id="avatar">头像</li>
          <li lay-id="pass">密码</li>
          <li lay-id="auth">认证信息</li>
          <li lay-id="reward">打赏管理</li>
        </ul>
        <div class="layui-tab-content" style="padding: 20px 0;">
          <div class="layui-form layui-form-pane layui-tab-item layui-show">
            <form method="post" lay-filter='info'>
              <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                {if get_system_config("user_email_must") != 'closed' }
                <div class="layui-input-inline">
                  <input type="text" name="email" value="{$user.email}" readonly class="layui-input">
                </div>
                {eq name='$user.is_email_verify' value='0'}
                <div class="layui-form-mid layui-word-aux">您的邮箱还未激活,需<a href="{:url('User/emailVerify')}" style="font-size: 12px; color: #4f99cf;">认证激活邮箱</a>。</div>
                {else/}
                <div class="layui-form-mid layui-word-aux"><a href="{:url('User/emailVerify')}" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a></div>
                {/eq}
                {else /}
                <div class="layui-input-inline">
                  <input type="text" name="email" value="{$user.email}" class="layui-input">
                </div>
                {/if}
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">

                  <input type="text" name="nickname" value="{$user.nickname}" required lay-verify="required" autocomplete="off" value="" class="layui-input">
                </div>

              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">

                  <input type="radio" name="gender" value="0" title="保密">
                  <input type="radio" name="gender" value="1" title="男">
                  <input type="radio" name="gender" value="2" title="女">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                  <input type="text" name="city" value="{$user.city}" autocomplete="off" value="" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label for="L_sign" class="layui-form-label">签名</label>
                <div class="layui-input-block">
                  <textarea placeholder="随便写些什么刷下存在感" name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;">{$user.sign}</textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" type="submit" lay-filter="info-save" lay-submit>确认修改</button>
              </div>
            </form>
          </div>

          <div class="layui-form layui-form-pane layui-tab-item">
            <div class="layui-form-item">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                <button type="button" class="layui-btn upload-img">
                  <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
                <img class="user-avatar" src="{$user.avatar_src}">
                <span class="loading"></span>
              </div>
            </div>
          </div>

          <div class="layui-form layui-form-pane layui-tab-item">
            <form method="post">
              <div class="layui-form-item">
                <label class="layui-form-label">当前密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="old_password" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="re_password" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" key="set-mine" lay-filter="password-save" lay-submit>确认修改</button>
              </div>
            </form>
          </div>
          <div class="layui-form layui-form-pane layui-tab-item">
            <form method="post">
              <input type="hidden" name="auth_status" value="3">
              <div class="layui-form-item">
                <label class="layui-form-label">认证状态</label>
                <div class="layui-input-inline">
                  <input type="text" class="layui-input" value="{$user.auth_status_name}" readonly>
                </div>
                <div class="layui-form-mid layui-word-aux">每次提交都需要重新审核,认证通过后可获得认证标示</div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">认证信息</label>
                <div class="layui-input-block">
                  <textarea placeholder="填写您的认证信息" name="auth_content" autocomplete="off" class="layui-textarea" style="height: 80px;">{$user.auth_content}</textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" key="set-mine" lay-filter="auth-save" lay-submit>确认修改</button>
              </div>
            </form>
          </div>
          <div class="layui-form layui-tab-item">
            <form method="post">

              <div class="layui-form-item">
                <label class="layui-form-label">支付宝收款码<div  class="upload-qrcode-alipay layui-btn layui-btn-xs" style="margin-left: 15px;">上传</div></label>
                <div class="layui-input-block">
                  <img src="{$user.income_qrcode_alipay_src}" class="upload-qrcode-alipay" alt="" style="max-width: 400px;max-height: 400px;cursor: pointer;">
                </div>

              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">微信收款码<div class="upload-qrcode-wechat layui-btn layui-btn-xs" style="margin-left: 15px;">上传</div></label>
                <div class="layui-input-block">
                  <img src="{$user.income_qrcode_wechat_src}" class="upload-qrcode-wechat" alt="" style="max-width: 400px;max-height: 400px;cursor: pointer;">
                </div>

              </div>

            </form>
          </div>


        </div>

      </div>
    </div>
  </div>
  </div>
  {include file='common/_footer'/}

  <script>

    layui.use(['form', 'upload'], function () {
      var form = layui.form;
      var upload = layui.upload;

      form.val('info', {
        gender: '{$user->getData("gender")}'
      })

      form.on('submit(info-save)', function (data) {

        $.post('{:url("update")}', data.field, function (result) {
          if (result.code == 0) {
            layer.msg('修改成功')
          } else {
            layer.msg(result.msg)
          }

        })
        return false;
      })
      form.on('submit(auth-save)', function (data) {

        $.post('{:url("update")}', data.field, function (result) {
          if (result.code == 0) {
            layer.msg('已提交修改,请等待认证审核')
          } else {
            layer.msg(result.msg)
          }

        })
        return false;
      })
      form.on('submit(password-save)', function (data) {

        $.post('{:url("updatePassword")}', data.field, function (result) {
          if (result.code == 0) {
            layer.msg('修改成功')
          } else {
            layer.msg(result.msg)
          }

        })
        return false;
      })

      //执行实例
      var uploadInst = upload.render({
        elem: '.upload-img' //绑定元素
        , url: '{:url("File/save")}' //上传接口
        , data: {
          type: 'user_avatar'
        }
        , before: function () {
          window.loading = layer.load()
        }
        , done: function (res) {
          //上传完毕回调
          layer.close(window.loading)

          if (res.code == 0) {
            $.post('{:url("update")}', {
              avatar: res.data.save_name
            }, function (result) {
              if (result.code == 0) {
                $('.user-avatar').attr('src', res.data.src)
                layer.msg('修改成功')
              } else {
                layer.msg(result.msg)
              }

            })
          } else {
            layer.msg(result.msg)
          }


        }
        , error: function () {
          //请求异常回调
        }
      });

      upload.render({
        elem: '.upload-qrcode-alipay',
        url: '{:url("File/save")}',
        data: {
          type: 'user_income_qrcode',

        },
        done: function (resultUpload) {
          $.post('{:url("update")}', {
            income_qrcode_alipay: resultUpload.data.save_name
          }, function (result) {
            if (result.code == 0) {

              layer.msg('修改成功')
              $('img.upload-qrcode-alipay').attr('src',resultUpload.data.src)
              // setTimeout(() => {
              //   location.reload();
              // }, 1200);
            } else {
              layer.msg(result.msg)
            }

          })
        }
      })
      upload.render({
        elem: '.upload-qrcode-wechat',
        url: '{:url("File/save")}',
        data: {
          type: 'user_income_qrcode',

        },
        done: function (resultUpload) {
          $.post('{:url("update")}', {
            income_qrcode_wechat: resultUpload.data.save_name
          }, function (result) {
            if (result.code == 0) {

              layer.msg('修改成功')
              $('img.upload-qrcode-wechat').attr('src',resultUpload.data.src)
              // setTimeout(() => {
              //   location.reload();
              // }, 1200);
            } else {
              layer.msg(result.msg)
            }

          })
        }
      })

    })

  </script>
</body>

</html>